<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>echarts-ajax</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="main" style="width:500px; height:280px;"></div><!--这边对div设置了id-->
    <script>
        var chart = echarts.init(document.getElementById('main'), 'white', {renderer: 'canvas'});//初始化在该高宽容器中

        // 定义一个函数，用ajax请求后端数据，并更新图表数据
        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/wordcloud1/",//指令url，映射到view里的函数
                dataType: "json",
                success: function (result) {//访问成功
                    var options = result.data;
                    chart.setOption(options);//显示配置的图表
                }
            });
        }

        // 使用setInterval函数，设置一个定时器，每隔30秒调用一次fetchData函数
        setInterval(fetchData, 30000);

    </script>
</body>
</html>
